<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<button class="layui-btn layui-btn-normal">添加</button>
<button class="layui-btn layui-btn-danger">删除</button>
<hr class="layui-border-orange">

<div class="layuimini-container" style="height: 801px">
    <div class="layuimini-main" style="height: 801px">
        <div style="height: 801px">
            <div id="test1" style="width: 13%;float: left;margin-top: 20px;margin-left: 20px"></div>
            <table id="demo" lay-filter="demo"></table>
        </div>
    </div>
</div>
<form id="layui-01" class="layui-form" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">所属类别:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">商品编号:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity2" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity3" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">商品条码:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity4" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称简拼:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity5" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">单位:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity6" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品规格:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity7" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">药剂类型:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity8" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">预设售价:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity9" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">预设进价:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity10" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存下限:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity11" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">保质期:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity12" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通用名:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity13" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">批准文号:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity14" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生产厂商:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity15" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生产许可:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity16" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注:</label>
        <div class="layui-input-inline">
            <input type="text" name="commodity17" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
<script src="../../js/jquery-3.6.0.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['tree' , 'table'], function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: '/layuipro' //数据接口
            ,page: true
            ,cols: [[ //表头
                {field: 'proId', title: '商品编号'},
                {field: 'proName', title: '商品名称'},
                {field: 'proAlias', title: '商品名称简拼'},
                {field: 'proTypeName', title: '类别名称'},
                {field: 'proVulgo', title: '通用名'},
                {field: 'unitId', title: '商品单位编号'},
                {field: 'proSize', title: '产品规格（量）'},
                {field: 'agentiaId', title: '药剂类型编号'},
                {field: 'proKeepDate', title: '保质期'},
                {field: 'proBid', title: '进价'},
                {field: 'proSalePrice', title: '预售价'},
                {field: 'warehouseId', title: '储存仓库编号'},
                {field: 'manufacturerId', title: '生产厂商编号'},
                {field: 'proPostil', title: '商品的批注文号'},
                {field: 'proBarCodes', title: '商品条码'},
                {field: 'proStockLower', title: '库存下限'},
                {field: 'proComment', title: '备注'}
            ]],
            limit:18
        });
        var tree = layui.tree;
        var $ = layui.jquery;
        tree.render({
            elem: '#test1',  //绑定元素
            data:[],
            id:'demoId',
            spread:true,
            accordion:true,
            onlyIconControl:true,
            click: function(obj){
                var layuiid=obj.data.id;
                table.reload('demo' , {
                    where: {
                        layuiid:layuiid
                    },
                    page:{
                        curr:1
                    }
                })
            }

        });
        $.getJSON("/tree",function(data){
            tree.reload('demoId' , {
                data: data,
                done:function (data) {
                }
            });
        });
        $(".layui-tree-txt").click(function () {
            layer.open({
                title: '删除的数据'
                ,content: '删除'
            });
        })
    });
    $(".layui-btn:eq(0)").click(function () {
        layer.open({
            title: '添加的数据'
            ,content: $("#layui-01")
        });
    })
    $(".layui-btn:eq(1)").click(function () {
        layer.open({
            title: '删除的数据'
            ,content: '删除'
        });
    })
</script>
</body>
</html>